<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>吉他谱</title>
    <style>
      ::-webkit-scrollbar {
        width: 10px;
        background-color: #eee;
      }
      ::-webkit-scrollbar-thumb {
        background-color: #aaa;
        border-radius: 5px;
      }
      body {
        margin: 0;
      }
      [v-cloak] {
        display: none;
      }
      .grid-container {
        display: grid;
        grid-template-columns: 150px 1fr;
        grid-template-rows: 1fr;
      }
      .content {
        text-align: center;
        overflow-y: auto;
        scroll-behavior: smooth;
      }
      img.img {
        width: 1150px;
      }
      @media screen and (max-width: 1000px) {
        .grid-container {
          display: grid;
          grid-template-columns: 150px 1fr;
          grid-template-rows: 1fr;
        }
        .index-container {
          display: none;
        }
        img.img {
          width: 100%;
        }
      }
      .divider {
        height: 2px;
        background-color: #eee;
      }
      a {
        text-decoration: none;
      }
      .index-container {
        margin: 20px;
      }
      .index-container .index {
        padding: 10px 15px;
        display: inline-block;
        border-radius: 50%;
      }

      .index-container .change-page {
        cursor: pointer;
      }
      .index-container .change-page:nth-child(1) {
        padding-bottom: 10px;
      }
      .index-container .change-page:nth-child(2) {
        padding-bottom: 20px;
      }
      .song-container {
        margin: 20px;
      }
      .song-container .song {
        cursor: pointer;
        padding: 10px;
        margin-bottom: 10px;
      }
      .selected {
        background-color: #cccccc;
      }
      .grid-container .operation-content {
        position: fixed;
        top: 0;
        right: 20px;
        padding: 10px;
        background-color: white;
        display: flex;
        flex-direction: column;
      }
      .grid-container .operation-content input {
        border-radius: 5px;
        padding: 10px 20px;
        width: 60px;
        border: 1px solid #aaa;
        display: block;
        box-sizing: content-box;
        margin-top: 10px;
      }
      .grid-container .operation-content .auto-scroll {
        display: block;
        border: none;
        border-radius: 5px;
        padding: 10px 20px;
        width: 100px;
        border: none;
        cursor: pointer;
      }
      .grid-container .operation-content .auto-scroll.on {
        /* border: 1px solid orangered; */
        color: white;
        background: orangered;
      }
    </style>
  </head>
  <body>
    <div v-cloak id="app" ref="container" class="grid-container">
      <div class="song-container">
        <div
          :class="['song', target === index ? 'selected' : '']"
          v-for="{ name, index } in songs"
          :key="index"
          @click="changeSong(index)"
        >
          {{ name }}
        </div>
      </div>
      <div class="content" ref="content">
        <div v-for="(url, idx) in images[target]" :key="url">
          <img class="img" :src="url" alt="" :id="'image' + idx" />
        </div>
      </div>
      <div class="operation-content">
        <button
          :class="`auto-scroll ${isAutoScroll ? 'on' : ''}`"
          @click="toggleAutoScroll"
        >
          自动滚动
        </button>
        <input v-model="everySeconds" />
        <input v-model="scrollPx" />
      </div>
      <!-- <div class="index-container">
        <div @click="scrollPrePage" class="change-page">pre</div>
        <div @click="scrollNextPage" class="change-page">next</div>
        <div v-for="(url, idx) in images[target]" :key="url">
          <a
            @click="changeIdx(idx)"
            :class="['index', idx === currentIdx ? 'selected' : '']"
            :href="'#image' + idx"
            >{{idx + 1}}</a
          >
        </div>
      </div> -->
    </div>
    <script src="js/vue.min.js"></script>
    <script src="js/vue-scrollto.js"></script>
    <script>
      const songIdLSKey = 'song-id-local-storage-key'
      let scrollIntervalId
      let app = new Vue({
        el: '#app',
        data: {
          elementHeight: 0,
          target: localStorage.getItem(songIdLSKey) || 'perfect',
          currentIdx: 0,
          isAutoScroll: false,
          everySeconds: 15000,
          scrollPx: 350,
          songs: [
            {
              name: '海阔天空',
              index: 'haikuotiankong',
            },
            {
              name: '孤勇者',
              index: 'guyongzhe',
            },
            {
              name: '讲不出再见',
              index: 'jiangbuchuzaijian',
            },
            {
              name: '天空之城',
              index: 'tkzc',
            },
            {
              name: 'perfect',
              index: 'perfect',
            },
            {
              name: 'shallow',
              index: 'shallow',
            },
            {
              name: '梦中的婚礼',
              index: 'weddingOfDream',
            },
            {
              name: '月半小夜曲',
              index: 'moonNightSong',
            },
            {
              name: '真的爱你',
              index: 'realLoveYou',
            },
            {
              name: '同桌的你',
              index: 'youOfSameDesk',
            },
            {
              name: '姑娘',
              index: 'girl',
            },
          ],
          images: {
            guyongzhe: [
              '孤勇者/1.png',
              '孤勇者/2.png',
              '孤勇者/3.png',
              '孤勇者/4.png',
              '孤勇者/5.png',
            ],
            perfect: [
              'perfect/1.PNG',
              'perfect/2.PNG',
              'perfect/3.PNG',
              'perfect/4.PNG',
              'perfect/5.PNG',
            ],
            tkzc: ['天空之城/1.PNG'],
            shallow: [
              'shallow/1.png',
              'shallow/2.png',
              'shallow/3.png',
              'shallow/4.png',
              'shallow/5.png',
            ],
            weddingOfDream: [
              '梦中的婚礼/梦中的婚礼1.gif',
              '梦中的婚礼/梦中的婚礼2.gif',
            ],
            moonNightSong: [
              '粤语/月半小夜曲1.png',
              '粤语/月半小夜曲2.png',
              '粤语/月半小夜曲3.png',
            ],
            jiangbuchuzaijian: [
              '讲不出再见/1.jpg',
              '讲不出再见/2.jpg',
              '讲不出再见/3.jpg',
            ],
            realLoveYou: ['粤语/真的爱你1.png', '粤语/真的爱你2.png'],
            youOfSameDesk: ['同桌的你/1.png', '同桌的你/2.png'],
            girl: ['姑娘/1.png', '姑娘/2.png'],
            haikuotiankong: [
              '海阔天空/1.png',
              '海阔天空/2.png',
              '海阔天空/3.png',
              '海阔天空/4.png',
              '海阔天空/5.png',
            ],
          },
        },
        methods: {
          changeSong(song) {
            console.log(song)
            this.target = song
            localStorage.setItem(songIdLSKey, song)

            this.currentIdx = 0
          },
          changeIdx(idx) {
            this.currentIdx = idx
          },
          scrollPrePage() {
            this.$refs.content.scrollBy(0, -((this.elementHeight / 4) * 3))
            // this.scrollPageTransition(-(this.elementHeight / 4 * 3))
          },
          scrollNextPage() {
            // this.scrollPageTransition(this.elementHeight / 4 * 3)
            this.$refs.content.scrollBy(0, (this.elementHeight / 4) * 3)
          },
          toggleAutoScroll() {
            this.isAutoScroll = !this.isAutoScroll
          },
          startAutoScroll() {
            clearInterval(scrollIntervalId)
            scrollIntervalId = setInterval(() => {
              this.$refs.content.scrollBy(0, Number(this.scrollPx))
            }, Number(this.everySeconds))
          },
          scrollToTop() {
            window.scrollTo(0, 0)
          },
        },
        watch: {
          everySeconds() {
            if (this.isAutoScroll) {
              this.startAutoScroll()
            } else {
              clearInterval(scrollIntervalId)
            }
          },
          scrollPx() {
            if (this.isAutoScroll) {
              this.startAutoScroll()
            } else {
              clearInterval(scrollIntervalId)
            }
          },
          isAutoScroll(now, pre) {
            if (now) {
              this.startAutoScroll()
            } else {
              clearInterval(scrollIntervalId)
            }
          },
        },
        mounted() {
          this.elementHeight = document.documentElement.clientHeight
          this.$refs.container.style.height = this.elementHeight + 'px'
        },
      })
      window.onresize = function () {
        app.$refs.container.style.height =
          document.documentElement.clientHeight + 'px'
        app.elementHeight = document.documentElement.clientHeight
      }
    </script>
  </body>
</html>
